<template>
  <div class="table-content">
    <el-table
        :data="tableData"
        class="parent-table"
        @row-click="selectTask"
    >
      <el-table-column type="expand">
        <template #default="props">
          <el-table :data="props.row.logs" class="child-table" @row-click="selectLog">
            <el-table-column label="id" prop="id" width="60px"/>
            <el-table-column label="调度时间" prop="createTime" width="200px"/>
            <el-table-column label="执行时间" prop="executeTime" width="200px"/>
            <el-table-column label="执行结果" prop="result" width="100px"/>
            <el-table-column label="备注" prop="content" width="100px"/>
            <el-table-column label="执行类型" prop="type" width="100px"/>
            <template #append>
              <div style="text-align: center; padding: 10px; " @click="goTaskLogPage">
                查看更多
              </div>
            </template>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="任务id" prop="taskId" width="80px" />
      <el-table-column label="描述" prop="description" width="200px" />
      <el-table-column label="调度类型" prop="type" width="100px" />
      <el-table-column label="运行模式" prop="runType" width="100px"/>
      <el-table-column label="负责人" prop="chargePerson" />
      <el-table-column label="状态" prop="status" />
    </el-table>
    <router-view>

    </router-view>
  </div>

</template>
<script setup>
import {ref} from 'vue'
import { useRouter} from "vue-router";

const router = useRouter()

const tableData = [
  {
    taskId: '1',
    description: 'description',
    type: '调度类型',
    runType: '运行模式',
    chargePerson: '负责人',
    status: '状态',
    logs: [
      {
        id: 1,
        createTime: '2022-01-01 12:00:00',
        executeTime: '2022-01-01 12:00:00',
        result: "成功",
        content: 'Tom',
        type: "success",
      },
      {
        id: 2,
        createTime: '2022-01-01 12:00:00',
        executeTime: '2022-01-01 12:00:00',
        result: "失败",
        content: 'Tom',
        type: "error",
      }
    ]
  },
    {
    taskId: '2',
    description: 'description',
    type: '调度类型',
    runType: '运行模式',
    chargePerson: '负责人',
    status: '状态',
    logs: [
      {
        id: 1,
        createTime: '2022-01-01 12:00:00',
        executeTime: '2022-01-01 12:00:00',
        result: "成功",
        content: 'Tom',
        type: "success",
      }
    ]
    },
    {
    taskId: '3',
    description: 'description',
    type: '调度类型',
    runType: '运行模式',
    chargePerson: '负责人',
    status: '状态',
    logs: [
      {
        id: 1,
        createTime: '2022-01-01 12:00:00',
        executeTime: '2022-01-01 12:00:00',
        result: "成功",
        content: 'Tom',
        type: "success",
      }
    ]
    }
]
function selectTask(row, column, event) {
  router.push({ path: '/task-detail/' + row.taskId });
}
function selectLog(row, column, event) {
  router.push({ path: '/log-detail/' + row.id });
}
function goTaskLogPage(row, column, event) {
  router.push({ path: '/scheduled-task/task-log', params: { taskId: row.taskId} });
}
</script>

<style scoped lang="scss">

.table-content {
  display: flex;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;

  .parent-table{
    width: 850px;
    min-height: 780px;
    border-right: rgb(177.3, 179.4, 183.6) 2px solid;

    .child-table{
      padding-left: 50px;
      width: 100%;
      border-top: black 1px solid;
      border-bottom: black 1px solid;
    }
  }
}

.el-table {
  width: 880px;
  --el-table-border-color: transparent;
  --el-table-text-color: #000000;
  --el-table-header-text-color: #000000;
  --el-table-row-hover-bg-color: rgba(137, 127, 91, 0.5);
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: rgba(137, 127, 91, 0.3);
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
  font-size: 14px;

}


</style>
